<template xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-slot="http://www.springframework.org/schema/rabbit">
    <div id="particles" class="back-pro">
        <!--<canvas id="canv"></canvas>-->
        <v-content class="topNpx">
            <v-container class="mt-12">
                <v-sheet>
                    <el-breadcrumb class="app-breadcrumb title" separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item v-for="item in levelList" :key="item.path">
                            <router-link :to="item.redirect||item.path">{{item.meta.title}}</router-link>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </v-sheet>
            </v-container>
            <!--个人信息侧边栏-->
            <userDrawer/>


            <v-layout class="topNpx back-body px-4 ml-12 pb-3 pt-3 white--text">
                <v-flex xs9>
                    <!--博客视图-->
                    <router-view ref="blogArea"/>
                </v-flex>
                <v-spacer></v-spacer>
                <v-flex xs4>
                    <v-layout column>
                        <v-flex>
                            <v-hover
                                    v-slot:default="{ hover }"
                                    open-delay="0"
                                    close-delay="0"
                            >
                                <v-sheet
                                        height="300px"
                                        width="100%"
                                        :elevation="hover ? 12 : 0"
                                        class="align-center"
                                >
                                    <v-card flat class="transparent">
                                        <v-card-title class="justify-space-between">
                                            <div class="subtitle-1">
                                                <v-icon small color="blue darken-2">mdi-message-text</v-icon>
                                                公告
                                            </div>
                                            <div>
                                                <v-tooltip top>
                                                    <template v-slot:activator="{ on }">
                                                        <v-btn text v-on="on">
                                                            <i class="el-icon-more-outline"/>
                                                        </v-btn>
                                                    </template>
                                                    <span>更多公告</span>
                                                </v-tooltip>
                                            </div>
                                        </v-card-title>
                                        <v-card-text class="text-left">
                                            <v-list-item dense v-bind:key="i"
                                                         v-for="(ann, i) in announcement">
                                                <v-list-item-content>
                                                    <v-list-item-title>
                                                        <el-link :type="i===0?'warning':'Info'">
                                                            【{{ann.type}}】{{ann.content}}
                                                        </el-link>
                                                    </v-list-item-title>
                                                </v-list-item-content>
                                            </v-list-item>
                                            <mu-flex>
                                                <mu-flex class="overflow-hidden" justify-content="center">
                                                    <v-icon>mdi-bell-ring-outline</v-icon>
                                                    <ul class="marquee_list" :class="{marquee_top:animate}">
                                                        <li v-bind:key="item.id" v-for="item in globalNotice">
                                                            {{item.content}}
                                                        </li>
                                                    </ul>
                                                </mu-flex>
                                            </mu-flex>

                                        </v-card-text>
                                    </v-card>
                                </v-sheet>
                            </v-hover>

                            <v-hover
                                    v-slot:default="{ hover }"
                                    open-delay="0"
                                    close-delay="0"
                            >
                                <v-sheet
                                        height="370px"
                                        width="100%"
                                        :elevation="hover ? 12 : 0"
                                        class="align-center mt-10"
                                >
                                    <v-card-title class="justify-space-between">
                                        <div class="subtitle-1">
                                            <v-icon small color="blue darken-2">mdi-dialpad</v-icon>
                                            文章分类
                                        </div>
                                        <div>
                                            <v-tooltip top>
                                                <template v-slot:activator="{ on }">
                                                    <v-btn text v-on="on">
                                                        <i class="el-icon-more-outline"/>
                                                    </v-btn>
                                                </template>
                                                <span>所有类别</span>
                                            </v-tooltip>
                                        </div>
                                    </v-card-title>
                                    <v-list dense>
                                        <v-list-item-group
                                                v-model="$store.state.blog.checkBlogType"
                                                color="indigo">
                                            <v-list-item
                                                    v-for="type in blogTypeList"
                                                    :key="type.id"
                                                    @click="searchWithType(type)"
                                            >
                                                <v-list-item-icon>
                                                    <v-icon v-text="type.icon"/>
                                                </v-list-item-icon>

                                                <v-list-item-content>
                                                    <v-list-item-title v-text="type.name"/>
                                                </v-list-item-content>
                                            </v-list-item>
                                        </v-list-item-group>
                                    </v-list>
                                </v-sheet>
                            </v-hover>
                        </v-flex>
                        <v-flex>
                            <v-hover
                                    v-slot:default="{ hover }"
                                    open-delay="0"
                                    close-delay="0"
                            >
                                <v-sheet
                                        height="310px"
                                        width="100%"
                                        :elevation="hover ? 12 : 0"
                                        class="align-center mt-10"
                                >
                                    <v-card-title class="justify-space-between">
                                        <div class="subtitle-1">
                                            <v-icon small color="blue darken-2">mdi-label-outline</v-icon>
                                            标签分类
                                        </div>
                                        <div>
                                            <v-tooltip top>
                                                <template v-slot:activator="{ on }">
                                                    <v-btn text v-on="on">
                                                        <i class="el-icon-more-outline"/>
                                                    </v-btn>
                                                </template>
                                                <span>所有标签</span>
                                            </v-tooltip>
                                        </div>
                                    </v-card-title>
                                    <v-card-text>
                                        <v-chip-group
                                                v-model="$store.state.sys.checkBlogTag"
                                                column
                                                active-class="primary--text"
                                        >
                                            <v-chip
                                                    outlined
                                                    v-for="tag in blogTagList"
                                                    :key="tag.id"
                                                    @click="searchWithTag(tag)">
                                                {{ tag.name }}
                                            </v-chip>
                                        </v-chip-group>
                                    </v-card-text>
                                </v-sheet>
                            </v-hover>
                        </v-flex>
                    </v-layout>
                </v-flex>
            </v-layout>
        </v-content>
    </div>
</template>

<script>
    import '@/assets/css/business/homepage/homepage.scss';
    import userDrawer from '@/components/common/UserDrawer.vue';

    export default {
        name: "home",
        components: {
            userDrawer
        },
        data: () => ({
            page: 1,
            images: [
                'https://picsum.photos/id/91/1810/900',
                'https://picsum.photos/id/290/1810/900',
                'https://picsum.photos/id/284/1810/900',
                'https://picsum.photos/id/370/1810/900',
                'https://picsum.photos/id/804/1810/900',
            ],
            color: "secondary",
            announcement: [],//公告栏信息
            globalNotice: [], //全局通知列表
            animate: false,
            blogTypeList: [],
            blogTagList: [],
            count: 8,//文章类别个数
            //面包屑
            levelList: null,
        }),
        methods: {
            /**
             * 初始化数据
             */
            initData() {
                this.getAnnouncementList();
                this.getGlobalNotice();
                this.getBlogTypes();
                this.getBlogTags();
            },
            /**
             * 获取公告信息
             */
            getAnnouncementList() {
                this.$axios.post("/api/announcement/list").then(res => {
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.announcement.push(...resultData);
                    }
                })
            },
            //获取滚动通知
            getGlobalNotice() {
                this.$axios.post("/api/notice/list").then(res => {
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.globalNotice.push(...resultData);
                    }
                })
            },
            getBlogTypes() {
                this.$axios.post("/api/blogType/list").then(res => {
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.blogTypeList.push(...resultData);
                    }
                })
            },
            getBlogTags() {
                this.$axios.post("/api/blogTag/list").then(res => {
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.blogTagList.push(...resultData);
                    }
                })
            },
            //滚动通知
            scroll() {
                let that = this;
                this.animate = true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
                setTimeout(() => {      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
                    that.globalNotice.push(that.globalNotice[0]);  // 将数组的第一个元素添加到数组的末尾
                    that.globalNotice.shift();               //删除数组的第一个元素
                    that.animate = false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
                }, 1000)
            },
            /**
             * 生成面包屑的方法
             */
            getBreadcrumb() {
                let matched = this.$route.matched.filter(item => item.name);
                const first = matched[0];
                if (first && first.name !== 'home') {
                    matched = [{path: '/home', meta: {title: '首页'}}].concat(matched)
                }
                this.levelList = matched;
            },
            /**
             * 根据类型搜索
             * @param blog
             */
            searchWithType(blog) {
                this.$store.commit("toggleBlogTypeSelected");
                //当前选中的博客类型--存储到store中
                let isTypeSelected = this.$store.state.blog.isTypeSelected;
                if (isTypeSelected) {
                    this.$store.state.blog.blogType = blog.blogType;
                }
                this.$refs.blogArea.loadBlogs(1, 10, this.$store.state.blog.blogType);
            },
            /**
             * 根据标签获取博客
             * @param tag
             */
            searchWithTag(tag) {
                this.$store.commit("toggleBlogTagSelected");
                //当前选中的博客标签--存储到store中
                let isTagSelected = this.$store.state.blog.isTagSelected;
                if (isTagSelected) {
                    this.$store.state.blog.blogTag = tag.id;
                }
                this.$refs.blogArea.loadBlogs(1, 10, this.$store.state.blog.blogType, this.$store.state.blog.blogTag);
            },

        },
        created() {
            this.initData();
        },
        mounted() {
            //两秒钟后开始滚动，频率: 每一秒钟滚动一次
            setInterval(this.scroll, 2000);
            this.getBreadcrumb();
        },
        watch: {
            $route() {
                this.getBreadcrumb();
            }
        }
    };
</script>
